<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>退库利旧</span>
        <el-button v-if="iseable" style="float: right; padding: 5px" type="success" @click="edit">退废利旧</el-button>
      </div>
      <div>
        <el-table
          :loading="loading"
          :data="insideTableData"
          class="fixed-table-table"
        >
          <el-table-column v-for="column in tkljColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
          <el-table-column v-if="iseable" label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="text" title="编辑" size="mini" icon="el-icon-edit" @click="editBack(row)" />
              <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row v-if="iseable">
        <el-col :span="24">
          <div style="float:right; margin-top:10px">
            <el-button size="mini" @click="cancalTK()">取消</el-button>
            <el-button size="mini" @click="saveTK()">完成</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <FormDialog ref="confirmEdit" class="fixed-dialog-height" :append-to-body="true" width="40%" title="编辑" :show="dialogFormVisible" @on-ok="ok" @on-cancel="cancel">
      <SpareConsumeBackEdit ref="SpareConsumeBackEdit" />
    </FormDialog>
  </div>
</template>
<script>
import databind from '@neu/biz-core/mixins/databind'
import {
  listBackSelect,
  backSave
} from '@neu/dcam-ui/api/spareconsume'
import FormDialog from '@neu/biz-core/components/FormDialog'
import SpareConsumeBackEdit from '@neu/dcam-ui/views/workOrder/forms/spareconsume/spareConsumeBackEdit'
export default {
  components: {
    FormDialog,
    SpareConsumeBackEdit
  },
  mixins: [databind],
  props: {
    taskId: {
      required: false,
      type: String,
      default: 'NULL'
    },
    iseable: {
      required: false,
      type: Boolean,
      default: true
    },
    workOrderNum: {
      required: false,
      type: String,
      default: ''
    },
    requirePerson: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      r: listBackSelect,
      dialogFormVisible: false,
      insideTableData: [],
      tkljColumns: [{
        title: '货品编号',
        key: 'storckNumber'
      }, {
        title: '备品备件分类',
        key: 'spareTypeName'
      }, {
        title: '规格型号',
        key: 'specification'
      }, {
        title: 'SN',
        key: 'sn'
      }, {
        title: '存放库房',
        key: 'storehouseName'
      }]
    }
  },
  created() {
    const parameter = {
      's_workOrderNum': this.workOrderNum
    }
    this.filter(parameter)
  },
  methods: {
    edit() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.SpareConsumeBackEdit.reset()
      })
    },
    ok() {
      this.$refs.SpareConsumeBackEdit.$refs.myform.validate((valid) => {
        if (valid) {
          const formItem = this.$refs.SpareConsumeBackEdit.formItem
          if (formItem.viewstatus !== 'edit') {
            formItem.viewstatus = null
            this.insideTableData.push(formItem)
          } else {
            let i = -1
            this.insideTableData.forEach((data, index) => {
              if (data === formItem) {
                i = index
              }
              formItem.viewstatus = null
            })
            this.$set(this.insideTableData, i, formItem)
          }
          this.$refs.SpareConsumeBackEdit.formItem = {}
          this.dialogFormVisible = false
        }
      })
    },
    cancel() {
      this.$refs.SpareConsumeBackEdit.formItem = {}
      this.dialogFormVisible = false
    },
    cancalTK() {
      this.$emit('close')
    },
    saveTK() {
      if (!this.requirePerson) {
        this.$message({
          showClose: true,
          message: '请选择一个资产确认人',
          type: 'error'
        })
      } else {
        this.insideTableData = this.insideTableData.filter(r => r.status !== 'new')
        if (!this.insideTableData || this.insideTableData.length === 0) {
          const l = {
            workOrderNum: this.workOrderNum,
            taskId: this.taskId,
            requirePerson: this.requirePerson,
            status: 'new'
          }
          this.insideTableData = []
          this.insideTableData.push(l)
        } else {
          this.insideTableData.forEach((data, index) => {
            data.workOrderNum = this.workOrderNum
            data.taskId = this.taskId
            data.requirePerson = this.requirePerson
          })
        }
        backSave(this.insideTableData).then(response => {
          if (response.status === 'success') {
            this.$message({
              showClose: true,
              message: '操作成功！',
              type: 'success'
            })
            this.$emit('close')
          }
        })
      }
    },
    editBack(row) {
      row.viewstatus = 'edit'
      this.$refs.SpareConsumeBackEdit.formItem = row
      this.dialogFormVisible = true
    },
    remove(row) {
      if (this.insideTableData) {
        let i = -1
        this.insideTableData.forEach((data, index) => {
          if (data === row) {
            i = index
          }
        })
        this.insideTableData.splice(i, 1)
      }
      this.insideTableData.remove(row)
    }
  }
}
</script>
